<template>
  <div>
    <el-color-picker
      v-if="inputType === 'color'"
      v-model="localValue"
      class="color-picker"
      @change="updateValue"
    />
    <a-switch
      v-if="inputType === 'switch'"
      v-model:checked="localValue"
      @change="updateValue"
    />
    <div v-if="inputType === 'image'">
      <a-button type="primary" @click="() => setImgVisible(true)"
        >预览图片</a-button
      >
      <a-image
        :style="{ display: 'none' }"
        :preview="{
          visible: img_visible,
          onVisibleChange: setImgVisible,
        }"
        :src="localValue"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from "vue";
import elColorPicker from "el-color-picker";

const props = defineProps({
  inputType: String,
  modelValue: String,
});
const img_visible = ref(false);
const setImgVisible = (value = false) => {
  img_visible.value = value;
};
const emit = defineEmits(["update:modelValue"]);

const localValue = ref(props.modelValue);

// 监听 prop 的变化以同步到 localValue
watch(
  () => props.modelValue,
  (newValue) => {
    localValue.value = newValue;
  }
);

const updateValue = (val) => {
  localValue.value = val;
  emit("update:modelValue", val);
};
</script>

<style>
.color-picker {
  width: 32px;
  height: 32px;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
